<template>
  <div>
    <v-chart :force-fit="true" :height="height" :data="sourceData" :scale="scale" :padding="[40, 40, 60, 40]">
      <v-tooltip :itemTpl="itemTpl"/>
      <v-axis/>
      <v-legend />
      <v-line :position="position" :color="color" />
      <v-point :position="position" :color="color" :size="4" :v-style="style" :shape="'circle'" />
    </v-chart>
  </div>
</template>

<script>

export default {
  name: 'ChartsLine',
  props: {
    color: {
      type: [String, Array, Object],
      default: 'color'
    },
    position: {
      type: String,
      default: 'key*value'
    },
    height: {
      type: Number,
      default: 400
    },
    sourceData: {
      type: Array,
      default: () => []
    },
    scale: {
      type: Array,
      default: () => [{
        dataKey: 'value',
        min: 0,
        max: 1
      }]
    },
    itemTpl: {
      type: String,
      default: '<li data-index={index}>' +
              '<span style="background-color:{color};width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:8px;"></span>' +
              '{name}: {value}' +
              '</li>'
    },
    labelConfig: {
      type: Array,
      default: () => {
        return [
          'count',
          {
            formatter: (val, item) => {
              return item.point.item + ': ' + val
            }
          }
        ]
      }
    }
  },
  data () {
    return {
      style: { stroke: '#fff', lineWidth: 1 }
    }
  }
}
</script>
